﻿//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}
<link rel="stylesheet" href="__STATIC__/vendors/css/datatables/datatables.min.css">
<link rel="stylesheet" href="__STATIC__/vendors/js/bootstrap-input/css/fileinput.min.css">

{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/bootstrap-input/js/fileinput.min.js"></script>
<script src="__STATIC__/vendors/js/bootstrap-input/js/locales/zh.js"></script>
<script src="__STATIC__/vendors/js/datatables/datatables.min.js"></script>
<script src="__STATIC__/vendors/js/noty/noty.min.js"></script>
<script>

    (function ($) {
    'use strict';
    // ------------------------------------------------------- //
    // Auto Hide
    // ------------------------------------------------------ //    
        $(function () {
            //定义表格
            var table = $('#table').DataTable({
                language: {
                    "url": "__STATIC__/vendors/js/datatables/cn.json"
                },
                lengthMenu: [
                    [10, 15, 20, -1],
                    [10, 15, 20, "所有"]
                ],//分页数目
                stateSave: true, 
                columnDefs: [
                    { "orderable": false, "targets": [8,9]}//禁止排序
                ]
            });
        });
        //初始化input
        $("#excel-input").fileinput({
            showPreview:false,
            language: 'zh',
            uploadUrl: '{:url('Order/input')}',
            required: true,
            showBrowse: true, 
            browseOnZoneClick: true,
            dropZoneEnabled: false,
            allowedFileExtensions: ["xls", "xlsx"],//只能选择xls,和xlsx格式的文件提交
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            /*不同文件图标配置*/
            previewFileIconSettings: { 
                 'docx': '<i class="fa fa-file-word-o text-primary" ></i>',
                 'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
                 'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                 'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
                 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                 'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
                 'doc': '<i class="fa fa-file-word-o text-primary"></i>',
                 'xls': '<i class="fa fa-file-excel-o text-success"></i>',
                 'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                 'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
                 'htm': '<i class="fa fa-file-code-o text-info"></i>',
                 'txt': '<i class="fa fa-file-text-o text-info"></i>',
                 'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
                 'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
                 'jpg': '<i class="fa fa-file-photo-o text-danger"></i>', 
                 'gif': '<i class="fa fa-file-photo-o text-muted"></i>', 
                 'png': '<i class="fa fa-file-photo-o text-primary"></i>'    
            },
            layoutTemplates:{ actionUpload:''},
            /*上传成功之后运行*/
            fileuploaded:$("#excel-input").on('fileuploaded', function (event, data) { 
                // var return_data = $.parseJSON(data.response);
                var return_data = data.response;
                if(return_data.result == true){
                    //提交成功后调用
                    new Noty({
                        type: "success",
                        layout: "topRight",
                        text: "上传成功，总共导入" + return_data.count + "条订单数据",
                        progressBar: true,
                        timeout: 2500,
                        animation: {
                            open: "animated bounceInRight",
                            close: "animated bounceOutRight"
                        },
                        callbacks: {
                            afterShow: function() {
                                window.location.reload();
                            },
                        }
                    }).show();
                }else{
                    //提交失败后调用
                    new Noty({
                        type: "error",
                        layout: "topRight",
                        text: "上传失败，失败原因是" + return_data.reason,
                        progressBar: true,
                        timeout: 2500,
                        animation: {
                            open: "animated bounceInRight",
                            close: "animated bounceOutRight"
                        },
                        callbacks: {
                            afterShow: function() {
                               window.location.reload();
                            },
                        }
                    }).show();
                }
            }),

            /*上传出错误处理*/
            fileerror:$('#excel-input').on('fileerror', function(event, data, msg) {
                console.log("Upload failed")
            }),
        });

        //切换侧边栏为窄边
        toggle();

    })(jQuery);

    function toggle(){
        if ($(window).outerWidth() > 1200) {
            $('#toggle-btn').toggleClass('active');

            $('.side-navbar').toggleClass('shrinked');
            $('.content-inner').toggleClass('active');

            if ($(window).outerWidth() > 1183) {
                if ($('#toggle-btn').hasClass('active')) {
                    $('.navbar-header .brand-small').hide();
                    $('.navbar-header .brand-big').show();
                } else {
                    $('.navbar-header .brand-small').show();
                    $('.navbar-header .brand-big').hide();
                }
            }

            if ($(window).outerWidth() < 1183) {
                $('.navbar-header .brand-small').show();
            }
        }
    }

    //提交交车链接
    function deliver(url,name,vin){
        var n = new Noty({
            type: "warning",
            text: '确认客户名称为：</br>'+name+' 的订单已经交车了吗？</br>车架号为：'+vin+'</br>请慎重操作！ ',
            progressBar : true, 
            animation: {
                open: "animated bounceInRight",
                close: "animated bounceOutRight"
            },
            buttons: [
                Noty.button('确定', 'btn btn-danger', function () {
                    $.post(url, function(data, status){
                        if (status == "success") {
                            if (data == "ok") {
                                //提交成功后调用
                                new Noty({
                                    type: "success",
                                    layout: "topRight",
                                    text: "客户名称为 " + name + "订单已经交车",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    },
                                    callbacks: {
                                        afterShow: function() {
                                            window.location.reload();
                                        },
                                    }
                                }).show();
                            }else{
                                //提交失败后调用
                                new Noty({
                                    type: "error",
                                    layout: "topRight",
                                    text: "交车提交失败",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    }
                                }).show();
                            }
                        }
                    });//确认后执行urlSubmit()完成实际执行
                    n.close();
                }, {id: 'button1', 'data-status': 'ok'}),

                Noty.button('取消', 'btn btn-shadow', function () {
                    n.close();
                })
            ]
        }).show();
    };
 
    //提交退单链接
    function chargeback(url,name){
        var n = new Noty({
            type: "error",
            text: '确认需要退订客户名称为：</br>'+name+' 的订单吗？</br>请慎重操作！ ',
            progressBar : true, 
            animation: {
                open: "animated bounceInRight",
                close: "animated bounceOutRight"
            },
            buttons: [
                Noty.button('确定', 'btn btn-danger', function () {
                    $.post(url, function(data, status){
                        if (status == "success") {
                            if (data == "ok") {
                                //提交成功后调用
                                new Noty({
                                    type: "success",
                                    layout: "topRight",
                                    text: "客户名称为 " + name + "退单成功",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    },
                                    callbacks: {
                                        afterShow: function() {
                                            window.location.reload();
                                        },
                                    }
                                }).show();
                            }else{
                                //提交失败后调用
                                new Noty({
                                    type: "error",
                                    layout: "topRight",
                                    text: "退单提交失败",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    }
                                }).show();
                            }
                        }
                    });//确认后执行urlSubmit()完成实际执行
                    n.close();
                }, {id: 'button1', 'data-status': 'ok'}),

                Noty.button('取消', 'btn btn-shadow', function () {
                    n.close();
                })
            ]
        }).show();
    };

    //打开detail模态框
    $('#detail-modal').on('hidden.bs.modal', function (e) {
            $(this).find('.modal-body').html(' 等待结果，请稍后...');
            $(this).removeData('bs.modal');
        }).on('show.bs.modal', function (e) {
            var button = $(e.relatedTarget);
            var modal = $(this);
            modal.find('.modal-content').load(button.data("remote"));
        });

    //打开配车模态框
    function distributionModalOpen(url){
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : url,
            //请求成功
            success : function(data) {
                // var data = $.parseJSON(result);
                if(data.stockOption.length != 0){
                    //删除的原有option，给color赋值
                    $('#vin').empty();
                    $('<option></option>').appendTo('#vin');
                    //添加option
                    $.each(data.stockOption, function(index,item) {
                        var option = item.option == null?'无':item.option;
                        $('<option value="' + item.vin + '">' + '车架号:' + item.vin + ' 选装:' + option + '</option>').appendTo('#vin');
                    });
                    $("#distribution-id").val(data.id);
                }else{
                    //删除的原有option，给color赋值
                    $('#vin').empty();
                    $('<option>暂时没有匹配车辆</option>').appendTo('#vin');
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert('数据有误，请联系管理员');
                console.log(e.status);
                console.log(e.responseText);
            }
        });
        $("#distribution-modal").modal('show');
    }

    //配车
    function distribution(){
        var vin = $("#vin").val();
        var id = $("#distribution-id").val();
        if(vin !=null){
            var url = '{:url('Order/distribution')}?vin='+vin+'&id='+id; 
            $.get(url, function(data, status){
                if (status == "success") {
                    if (data == "ok") {
                        //提交成功后调用
                        new Noty({
                            type: "success",
                            layout: "topRight",
                            text: "订单配车成功",
                            progressBar: true,
                            timeout: 2500,
                            animation: {
                                open: "animated bounceInRight",
                                close: "animated bounceOutRight"
                            },
                            callbacks: {
                                afterShow: function() {
                                    $("#distribution-modal").modal('hide');
                                    window.location.reload();
                                },
                            }
                        }).show();
                    }else{
                        //提交失败后调用
                        new Noty({
                            type: "error",
                            layout: "topRight",
                            text: "配车提交失败",
                            progressBar: true,
                            timeout: 2500,
                            animation: {
                                open: "animated bounceInRight",
                                close: "animated bounceOutRight"
                            }
                        }).show();
                    }
                }
            });//确认后执行urlSubmit()完成实际执行
        }
    }

</script>
{/block}

//页面名称
{block name="PageName"}
未交订单列表
{/block}

//自定义Modal
{block name="Modal"}
<!-- 详情Modal开始 -->
<div id="detail-modal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            读取中。。。
        </div>
    </div>
</div>
<!-- 详情Modal结束 -->

<!-- 配车Modal开始 -->
<div id="distribution-modal" class="modal fade" >
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">为此订单配车</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">close</span>
                </button>
            </div>
            <div class="modal-body">
                
                <div class="input-group">
                    <span class="input-group-addon addon-primary">车架号*</span>
                    <select class="form-control"  name="vin" id="vin">
                    </select>
                    <input type="number" name="distribution-id" id="distribution-id" hidden="hidden">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-shadow" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="distribution()">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 配车Modal开始 -->

<!-- 导入Modal开始 -->
<div id="input-modal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">导入订单</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">关闭</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <label class="control-label"> 选择文件 </label>
                        <input id="excel-input" type="file" class="file" name="input-excel">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <span style="color:red;">请务必使用标准模板导入，以免出现不可预料的情况！    </span>
                        <a href="__STATIC__/template/OrderInputTemplate.xlsx">模板下载</a>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-shadow" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 导入Modal结束 -->
{/block}

//主页面
{block name="main"}
<div class="row">
    <div class="col-xl-12">
        <!-- Export -->
        <div class="widget has-shadow">
        	<div class="widget-header bordered d-flex align-items-center">
                <h2>未交订单列表 <small>绿色为已配车订单</small></h2>
                <div class="widget-options">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#input-modal">导入</button>
                        <button type="button" class="btn btn-secondary" onclick="javascript:window.location.href='{:url('Order/undeliveredOutput')}'">导出</button>
                        <button type="button" class="btn btn-primary" onclick="javascript:window.location.href='{:url('Order/create')}'">添加</button>
                    </div>
                </div>
            </div>
            <div class="widget-body">
                <div class="table-responsive">
                    <table id="table" class="table mb-0">
                        <thead>
                            <tr>
                                <th>订单时间</th>
                                <th>顾问</th>
                                <th>名称</th>
                                <th>电话</th>
                                <th>车系</th>
                                <th>配置</th>
                                <th>颜色</th>
                                <th>内饰</th>
                                <th>选装</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {volist name="data" id="list"}
                            <tr {if $list.distribution == 1}style="color:green;"{/if}>
                                <td>{$list.create_date|date="m月d日"}</td>
                                <td>{$list.sales}</td>
                                <td>{$list.name}</td>
                                <td>{$list.phone}</td>
                                <td>{$list.vehicle}</td>
                                <td>{$list.config}</td>
                                <td>{$list.color}</td>
                                <td>{$list.trim}</td>
                                <td>{$list.option}</td>
                                <td class="td-actions">
                                    <div class="btn-group" role="group">
                                        {if $list.distribution == 0}
                                            {if $list.canDistribution == 1}
                                                <button type="button" class="btn btn-success btn-sm mr-1 mb-2"  onClick="distributionModalOpen('{:url('Order/undeliveredDistribution',['id' => $list.id])}')">配车</button>
                                            {else}
                                                <button type="button" class="btn btn-danger btn-sm mr-1 mb-2">无车</button>
                                            {/if}
                                        {else}
                                            <button type="button" class="btn btn-success btn-sm mr-1 mb-2" onClick="distributionModalOpen('{:url('Order/undeliveredDistribution',['id' => $list.id])}')">换车</button>
                                        {/if}
                                        {if $list.distribution == 1}
                                        <button type="button" class="btn btn-primary btn-sm mr-1 mb-2" onClick="deliver('{:url('Order/deliver',['id' => $list.id])}','{$list.name}','{$list.vin}')">交车</button>
                                        {/if}
                                        <button type="button" class="btn btn-info btn-sm mr-1 mb-2" data-toggle="modal" data-remote="{:url('Order/read',['id' => $list.id])}" data-target="#detail-modal">详情</button>
                                        <button type="button" class="btn btn-warning btn-sm mr-1 mb-2"  onclick="javascript:window.location.href='{:url('Order/edit',['id' => $list.id,'type'=>'edit'])}'">编辑</button>
                                        <button type="button" class="btn btn-danger btn-sm mr-1 mb-2" onClick="chargeback('{:url('Order/chargeback',['id' => $list.id])}','{$list.name}')">退单</button>
                                    </div>
                                </td>
                            </tr>
                            {/volist}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- End Export -->
    </div>
</div>

<!-- End Centered Modal -->
{/block}

